<template>
    <div class="container">
        <div class="common-layout">
            <el-container>
                <div class="common-container">
                    <el-aside width="180px">
                        <el-card>
                            <div class="commit-header">
                                <div>
                                    <el-avatar :size="100">
                                        <el-icon :size="100">
                                            <UserFilled/>
                                        </el-icon>
                                    </el-avatar>
                                </div>
                                <div>
                                    <span>1889670_ce1D</span>
                                </div>
                                <div>
                                    <el-button color="deeppink" size="small">Lv.1</el-button>
                                </div>
                            </div>
                            <div class="commit-gz">
                                <div>
                                    <div>0</div>
                                    <div>关注</div>
                                </div>
                                <div>
                                    <div>0</div>
                                    <div>粉丝</div>
                                </div>
                            </div>
                        </el-card>
                        
                        <el-card style="margin-top:10px">
                            <el-menu>
                                <RouterLink to="/my/dynamics">
                                    <el-menu-item index="0">动态资源</el-menu-item>
                                </RouterLink>
                                <RouterLink to="/my/vip">
                                    <el-menu-item index="1">我的会员</el-menu-item>
                                </RouterLink>
                                <routerLink to="/my/wallet">
                                    <el-menu-item index="2">我的钱包</el-menu-item>
                                </routerLink>
                                <RouterLink to="/my/coupons">
                                    <el-menu-item index="3">我的优惠券</el-menu-item>
                                </RouterLink>
                                <router-link to="/my/my_order">
                                    <el-menu-item index="4">我买的订单</el-menu-item>
                                </router-link>
                                <el-sub-menu index="5">
                                    <template #title>
                                        <span>我卖的</span>
                                    </template>
                                    <routerLink to="/my/orders_manager">
                                        <el-menu-item index="5-1">订单管理</el-menu-item>
                                    </routerLink>
                                    <routerLink to="/my/goods_manager">
                                        <el-menu-item index="5-2">商品管理</el-menu-item>
                                    </routerLink>
                                    <routerLink to="/my/customers_manager">
                                        <el-menu-item index="5-3">客户管理</el-menu-item>
                                    </routerLink>
                                    <routerLink to="/my/pending_payments_manager">
                                        <el-menu-item index="5-4">代收款</el-menu-item>
                                    </routerLink>
                                    <routerLink to="/my/minePreferentialManagement">
                                        <el-menu-item index="5-5">优惠管理</el-menu-item>
                                    </routerLink>
                                    <routerLink to="/my/mineReviewsManagement">
                                        <el-menu-item index="5-6">评价管理</el-menu-item>
                                    </routerLink>
                                    <routerLink to="/my/deposit">
                                        <el-menu-item index="5-7">保证金</el-menu-item>
                                    </routerLink>
                                </el-sub-menu>
                                <RouterLink to="/my/edit_info">
                                    <el-menu-item index="5">我的资料</el-menu-item>
                                </RouterLink>
                            </el-menu>
                        </el-card>
                    </el-aside>
                </div>
                <router-view></router-view>
            </el-container>
        </div>
    </div>
</template>

<script setup lang='ts'>

import {UserFilled} from "@element-plus/icons-vue"
import {ref} from "vue";

const activeIndex = ref('')
const handleSelect = (key: string, keyPath: string[]) => {
    activeIndex.value = key
}
</script>

<style lang="less" scoped>
.container {
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    height: 100%;
    
    .common-layout {
        margin-top: 20px;
        
        .common-container {
            display: flex;
            flex-direction: column;
            
            .commit-header {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                
                span {
                    font-size: 16px;
                    margin-top: 5px;
                }
            }
            
            .commit-gz {
                display: flex;
                justify-content: space-around;
                margin-top: 20px;
                
                div {
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    font-size: 16px;
                }
            }
            
            .el-menu {
                border-right: 0 !important;
            }
            
        }
    }
}

.active {
    background: #099
}
</style>
